<script setup lang="ts">
import {useRoute} from "vue-router"
import {  ref, onUpdated, computed, onMounted } from "vue";
import VideoCard from "@/components/VideoCard.vue";
import GetRequest from "util/requests/getRequest";
import MyIcon from "@/components/MyIcon.vue";
import { userInfoStore } from "store/userInfo";
const getRequest = new GetRequest();
let  videoAll = ref( [])
let  video = ref([])
const count = ref(0)
const total = ref(0)
const step = 20;
const loading = ref(false)
const noMore = computed(() =>   count.value == total.value)
const disabled = computed(() => loading.value || noMore.value)
const isloding = ref(true)
const route = useRoute();
const id = computed({
  get(){
    total.value =0
    count.value =0
    return   route.params.id
  },
  set(newV){
    console.log(newV);
  }
})
const handleData =async (data)=>{
  let items = await data
  console.log(video.value);
  if(id.value=="home"){
    total.value = items.length
    if(count.value<=total.value) {
      // console.log(count.value);
      video.value=items.slice(0, count.value + step)
      count.value+=step
    }
    else{
      console.log("数据已经到底了~~~~~~~~~");
    }
  }else {
    items = items.filter(item=>item.video.videoClassify==id.value)
    total.value = items.length
    if(count.value<=total.value) {
      // console.log(items.slice(0, count.value + step));
      video.value=items.slice(0, count.value + step)
    }
    else{
      console.log("数据已经到底了~~~~~~~~~");
    }
  }
  isloding.value=false

}
const isLogin = ref(false)
const getData = async ()=>{
  const  data = []
  const res:any = await getRequest.getAllVideo()
  // console.log(res);
  if (res.code == 200) {
    if (userInfoStore().isLogin) {
      for (const item of res.obj) {
        const res1:any = await getRequest.getCollectByIds({
          videoId: item.id,
          userId: userInfoStore().userInfo.LoginUser.id
        })
        if(res1.code==200){
          data.push({
            video: item,
            isCollect: true

          })
        }else {
          data.push({
            video: item,
            isCollect: false

          })
        }

      }

    } else {
      res.obj.forEach(item => {
        data.push({
          video: item,
          isCollect: false
        })
      })
    }
  }
  return data;
}
onMounted(()=>{
  // 数据加载
  if(localStorage.getItem('userInfo')!=null){
    isLogin.value=true
  }
  handleData(getData())
})

onUpdated(()=>{
  // console.log("dddddd");
  isloding.value=true
  setTimeout(() => {
    isloding.value =false
    handleData(getData())
  }, 200)
})
// 触底自动加载数据
const handleScroll=()=>{
  console.log(videoAll.value);
  loading.value = true
  video.value = []
  setTimeout(() => {
    handleData(getData())
    loading.value=false
  }, 2000)
}
</script>

<template>
  <el-scrollbar>
    <div :infinite-scroll-immediate="false" :infinite-scroll-disabled="disabled" v-loading="isloding" class="content" v-infinite-scroll="handleScroll">
      <VideoCard :video="video" :is-operator="false">
        <template v-if="isLogin" #operator="{index,isCollect,change}">
          <div @click="change(index)">
            <my-icon  v-if="!isCollect"  icon-name="videoshoucang1">
            </my-icon>
            <my-icon v-if="isCollect"  icon-name="videoshoucangjia">
            </my-icon>
          </div>
        </template>
      </VideoCard>
    </div>
    <div class="loading">
      <p v-if="loading">加载中...</p>
      <p v-if="noMore">No more</p>
    </div>
  </el-scrollbar>
</template>

<style scoped>
.loading{
  text-align: center;
  font-weight: bold;
  font-style: italic;
  color: #578aef;
}
.content{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}
</style>